<template>
    <div>
        {{ num }}
    </div>

    <div>
        <span>姓名：</span>
        <input type="text" v-model="fulluser">
    </div>

    <!-- 全选影响小选-->
    <div>
        <span>全选</span><input type="checkbox" v-model="isAll">
        <button @click="btn">反选</button>
        <ul>
            <li v-for="item in arr" :key="item">
                <input type="checkbox" v-model="item.c"/>
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>


</template>

<script setup>
import { computed, ref } from 'vue';

const a = 10 
const b = 20 
const num = computed(() => { 
    return a + b
})
// 可写的计算属性
const fulluser = computed({
    get() { 
        return "萧炎"
    },
    set(val) { 
        // 打印传入的值
        console.log(val)
    }
})
//数据
const arr = ref([
    {name:'叶凡',c:false},
    { name: '白小纯', c: false },
    { name: '萧炎', c: false },
    { name: '小医仙', c: false },
])

// const isAll = computed(() => { 
//     //every 函数 判断数组中是否所有元素都满足条件 如果全部满足则返回true 不满足返回false 用于判断全选是否选中


//     return arr.value.every( item => item.c )
// })

const isAll = computed({
    get() { 
        return arr.value.every( item => item.c )
    },
    set(val) { 
        console.log(val);
        arr.value.forEach( item =>item.c = val)
        
    }
})
const btn = () => { 
    arr.value.forEach(item => {
        console.log(item.c);
        
        return item.c = !item.c})
}
</script>

<style lang="scss" scoped>

</style>